<template>
  <router-view></router-view>
  <audio id="backgroundMusic" loop>
    <source src="./assets/BGM.mp3" type="audio/mpeg" />
  </audio>
  <audio id="clickMusic">
    <source src="./assets/click.mp3" type="audio/mpeg" />
  </audio>
  <audio id="clickBackMusic">
    <source src="./assets/click_back.mp3" type="audio/mpeg" />
  </audio>
  <audio id="clickYesMusic">
    <source src="./assets/click_yes.mp3" type="audio/mpeg" />
  </audio>
  <audio id="clickNoMusic">
    <source src="./assets/click_no.mp3" type="audio/mpeg" />
  </audio>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted } from "vue";
import axios from "axios";

onMounted(() => {
  // const appid = "wx941907cf45112afa";
  // const appSecret = "607beda39bcbfed666a678252af16746";
  // axios
  //   .get(
  //     `/api/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appSecret}`
  //   )
  //   .then(function (response) {
  //     console.log(response);
  //     localStorage.setItem("access_token", "");
  //     localStorage.setItem("access_token", response.data.access_token);
  //   });

  // 获取音频元素
  const backgroundMusic = document.getElementById("backgroundMusic");
  if (backgroundMusic) {
    backgroundMusic.play();
    // 兼容在微信里自动播放
    document.addEventListener(
      "WeixinJSBridgeReady",
      function () {
        backgroundMusic.load();
        backgroundMusic.play();
        WeixinJSBridge.call('hideToolbar');
      },
      false
    );
  }
});
</script>

<style lang="scss">
@import "./style/common.scss";

#app {
  width: 100vw;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  overflow: hidden;
  .container {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    .bkg {
      height: 100%;
    }
  }
}
</style>
